<template>
  <div class="set-advice-add">
    <w-nav-bar
      title="意见反馈"/>
    <group>
      <x-input
        :max="10"
        :min="1"
        placeholder-align="right"
        text-align="right"
        :show-clear="false"
        title="姓名/昵称"
        placeholder="请输入姓名/昵称"
        v-model="form.name"/>
    </group>
    <group>
      <x-input
        :max="11"
        :min="11"
        type="number"
        placeholder-align="right"
        text-align="right"
        :show-clear="false"
        title="手机号"
        placeholder="请输入手机号"
        v-model="form.phone"/>
    </group>
    <group>
      <x-input
        :max="6"
        :min="10"
        type="number"
        placeholder-align="right"
        text-align="right"
        :show-clear="false"
        title="QQ"
        placeholder="请输入QQ"
        v-model="form.qq"/>
    </group>
    <group>
      <x-input
        :max="30"
        :min="1"
        placeholder-align="right"
        text-align="right"
        :show-clear="false"
        title="微信"
        placeholder="请输入微信"
        v-model="form.wx"/>
    </group>
    <group>
      <x-textarea
        :max="140"
        :min="1"
        :show-clear="false"
        placeholder="请输入反馈内容"
        v-model="form.content"/>
    </group>

    <group>
      <x-switch
        title="是否显示到意见列表"
        v-model="form.isShow"/>
    </group>

    <div class="w-max-btn w-btn-fixed-b">
      <x-button
        type="primary"
        @click.native="okBtnClick"
        :disabled="!form.name || !form.content">确定</x-button>
    </div>
  </div>
</template>

<script>
  import FeedBackModel from '@/models/web/FeedBackModel'
  import { Group, XTextarea, XInput, XSwitch, XButton  } from 'vux'

  export default {
    name: 'SetAdviceAdd',
    components: {
      Group, XTextarea, XInput, XSwitch, XButton
    },
    data() {
      return {
        /**
         * 意见反馈模型
         */
        form: new FeedBackModel ()
      }
    },
    methods: {
      /**
       * 确定按钮点击
       */
      okBtnClick() {
        this.$w_indicator(this.form.addOrUpdate(), {
          successText: '提交成功'
        }).w_then(() => {
          this.$router.go (-1)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .set-advice-add {
    .switch {
      display: flex;
      align-items: center;
    }
  }

</style>
